<template>
  <div class="content">
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%">
      <el-table-column
              width="55">
      </el-table-column>
      <el-table-column
              prop="storeName"
              label="商家名称"
              width="120">
      </el-table-column>
      <el-table-column
              prop="commodityName"
              label="商品名称"
              width="200">
      </el-table-column>
      <el-table-column
              prop="specs"
              label="商品规格"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="评价图片">
        　　<template slot-scope="scope">
        　　　　<img v-for="img in scope.row.imgList" :src="'http://localhost:7777/'+img" width="50px" height="50px"/>
        　　</template>
      </el-table-column>
      <el-table-column
              prop="score"
              label="评分"
              width="80"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column
              prop="content"
              label="评价内容"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  type="success"
                  @click="uptateEvaluate(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
            title="修改评论"
            :visible.sync="evaluateVisible"
            :close-on-click-modal="false">
      <avue-form v-model="evaluateForm" :option="evaluateOption" @submit="evaluateSubmit"/>
    </el-dialog>
  </div>
</template>

<script>
  import {getToken} from "@/util/auth";
	import Checkbox from '@/widgets/Checkbox'
	export default {
	  name: 'Collection',
	  components: { Checkbox },
	  data () {
	    return {
	      type:'',
          tableData: [],
          evaluateVisible:false,
          evaluateForm:{},
          evaluateOption: {
            height: 'auto',
            calcHeight: 210,
            searchShow: true,
            searchMenuSpan: 6,
            tip: false,
            border: true,
            index: true,
            viewBtn: true,
            selection: true,
            column: [
              {
                label: "评价图片",
                prop: "img",
                type: 'upload',
                span: 24,
                dataType: "string",
                propsHttp: {
                  res: 'data'
                },
                listType: 'picture-card',
                action: '/api/pxx_commodity/commodity/uploadAvue',
              },
              {
                label: "评分",
                prop: "score",
                type: 'rate',
                showText: true,
                texts: ['极差', '失望', '一般', '满意', '非常满意'],
                rules: [{
                  required: true,
                  message: "请输入评分",
                  trigger: "blur"
                }]
              },
              {
                label: "评价内容",
                prop: "content",
                type:"textarea",
                maxlength:30,
                span: 24,
                rules: [{
                  required: true,
                  message: "请输入评价内容",
                  trigger: "blur"
                }]
              },
            ]
          },
	    }
	  },
	  mounted () {
	    this.evaluate()
	  },
	  methods: {
        //打开编辑评论框
        uptateEvaluate(row){
          this.evaluateVisible = true
          this.evaluateForm = row
        },
        //修改评论
        evaluateSubmit(scope,done){
          var user = JSON.parse(this.userData)
          done();
          var img = scope.img;
          img =  img.split(',');
          var newImg = '';
          for (let i = 0; i < img.length; i++) {
            newImg+=img[i].replace("http://localhost:7777",'')+","
          }
          scope.img = newImg.slice(0,newImg.length-1)
          scope.updateUser = user.id
          scope.createUser = user.id
          this.$http({
            method:"post",
            url:"/api/pxx-evaluate/evaluate/submit",
            data: scope,
            headers: {'Content-Type': 'application/json'}
          }).then(res =>{
            this.evaluate();
            this.$message({
              type: "success",
              message: "评价成功!"
            });
          });
          this.evaluateVisible=false
        },
        //评论列表
        evaluate(){
          this.userData = getToken();
          if (this.userData===undefined){
            this.$message.error('你还未登录!');
            this.$router.push({ path: 'UserInfo'})
            return
          }
          var id = JSON.parse(this.userData).id;
          this.$http({
            method:"get",
            url:"/api/pxx-evaluate/evaluate/page",
            params: {
              createUser: id
            }
          }).then(res =>{
            this.tableData = res.data.data.records
            for (let i = 0; i < this.tableData.length; i++) {
              var imgList =this.tableData[i].img.split(',')
              this.tableData[i].imgList = imgList
              var img = []
              for (let j = 0; j < imgList.length; j++) {
                img.push("http://localhost:7777"+imgList[j])
              }
              this.tableData[i].img = img
            }
          });
        }
	  }
	}
</script>

<style scoped>
  .content {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  .one-line {
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .checkbox {
    vertical-align: -2px;
  }
  .table-goods {
    width: 100%;
    margin-top: 15px;
    color: #555;
    table-layout: fixed;
    border-collapse: collapse;
    user-select: none;
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(149, 191, 103, .1);
  }
  .table-goods th,
  .table-goods td {
    text-align: left;
    font-size: 16px;
    padding-left: 12px;
  }
  .table-goods th {
    line-height: 52px;
  }
  .table-goods td {
    line-height: 120px;
  }
  .ipt-quantity {
    width: 60px;
    padding-left: 10px;
    line-height: 32px;
    outline: none;
    border: 1px solid #ccc;
  }
  .thumbnail-goods {
    width: 100px;
    vertical-align: middle;
  }
  .btn-text {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
  }
  .banner-pay {
    border-top: 1px solid #ebeef5;
    padding: 15px 5px;
    overflow: hidden;
    text-align: right;
    color: #777;
  }
  .btn-pay {
    display: inline-block;
    width: 120px;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
    color: #fff;
    background-color: #95bf47;
    user-select: none;
    transition: background-color .2s linear;
  }
  .placeholder {
    color: #555;
    line-height: 80px;
    font-size: 24px;
  }
</style>
